<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理账号</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        .navigation {
            display: flex;
            background-color: rgb(48, 65, 86);
            height: 100vh;
            width: 12rem;
            justify-content: center;
            list-style-type: none;
        }

        .wrap {
            display: flex;
            justify-content: center;
            background-color: rgb(48, 65, 86);
            width: 10rem;
            height: 1rem;
            color: inherit;
            color: white;
            text-decoration: none;
            padding-right: 1rem;
            margin: 3rem;
        }

        .selected {
            color: #7B8CFE;
        }

        .background {
            display: flex;
            height: 100vh;
            width: 100%;
            background-color: #eceff7;
            flex-direction: column;
            justify-content: flex-start;
            align-items: start;
            overflow: auto;
            overflow-x: hidden;
        }

        .data {
            margin: auto;
            margin: 1rem 2rem 2rem 2rem;
            /* padding-top: 1rem;
            padding-left: 2rem;
            padding-right: 2rem;
            margin-bottom: 2rem; */
            width: 58.5rem;
            align-items: center;
            justify-content: center;
        }

        th {
            padding-left: .625rem;
            padding-right: .625rem;
            overflow: hidden;
            white-space: nowrap;
            max-height: 1rem;
        }

        input {
            border-radius: .3125rem;
            border: .125rem solid #000000;
            width: 1.25rem;
            height: 1.25rem;
        }

        input[type="checkbox"]:checked {
            background-color: #555;
            color: #fff;
        }

        .edit {
            margin-top: 1rem;
            margin-left: 2rem;
            height: 2rem;
            /* width: 5rem; */
            width: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .edit:hover {
            color: #7B8CFE;
        }

        .window-mask {
            /* display: flex; */
            display: none;
            background-color: rgb(0, 0, 0, 25%);
            z-index: 1;
            position: absolute;
            height: 100vh;
            width: 100%;
            top: 0rem;
            left: 0rem;
        }

        .container1 {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: auto;
            width: 25rem;
            height: 25rem;
            background-color: #ffffff;
            border-radius: 0.625rem;
        }

        .header {
            margin-top: 3.125rem;
            font-size: 1.5rem;
            font-weight: normal;
            text-align: center;
            line-height: 6.25rem;
        }

        .input-item {
            display: block;
            width: 8rem;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }

        .btn {
            padding: 10px;
            text-align: center;
            margin-top: 40px;
            background-color: #7B8CFE;
            border: .0625rem solid #7B8CFE;
            color: #fff;
            border-radius: .625rem;
        }

        .btn:hover {
            background-color: #ffffff;
            border: .0625rem solid #7B8CFE;
            color: #000000;
        }

        .container2 {
            display: flex;
            justify-content: start;
            align-items: start;
            flex-direction: column;
            background-color: #ffffff;
            border-radius: 0.625rem;
            width: 62.5rem;
            margin-top: 3rem;
            margin-left: 2rem;
        }

        .title {
            display: block;
            width: auto;
            margin-left: 2rem;
            height: 2rem;
            margin-top: 2rem;
            font-weight: bold;
            font-size: 1.5rem;
        }
    </style>
</head>

<body>
    <div style="display: flex;justify-content: flex-start;">
        <ul class="navigation" id="nav">
            <div class="menu-wrapper">
                <a href="./index.html" class="wrap ">
                    <li>
                        <span>首页</span>
                    </li>
                </a>
                <a href="./mine.html" class="wrap">
                    <li>
                        <span>我的</span>
                    </li>
                </a>
                <a href="./identify.html" class="wrap" v-if="antiPosition">
                    <li>
                        <span>管理员认证</span>
                    </li>
                </a>
                <a href="./administrator.html" class="wrap selected" id="administrator" v-if="position">
                    <li>
                        <span>管理账号</span>
                    </li>
                </a>
            </div>
        </ul>
        <div class="background" id="root">
            <div class="container2">
                <div class="title">管理用户</div>
                <div class="edit" @click="edit">
                    <img src="./image/编辑.png" style="height: 2rem;width: 2rem;">
                    <span style="padding-left: 0.25rem;">编辑</span>
                </div>
                <table class="data" id="myTable">
                    <thead style="height:2rem;">
                        <tr>
                            <th>选择</th>
                            <th>用户名</th>
                            <th>用户权限</th>
                            <th>总计使用次数</th>
                            <th>单日使用次数</th>
                            <th>单日使用限制数</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="container2">
                <div class="title">认证码</div>
                <div class="edit" @click="editCode">
                    <img src="./image/编辑.png" style="height: 2rem;width: 2rem;">
                    <span style="padding-left: 0.25rem;">新建认证码</span>
                </div>
                <table class="data" id="code">
                    <thead style="height:2rem;">
                        <tr>
                            <th>认证码</th>
                            <th>是否已被使用过</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="window-mask" id="window-mask1">
        <div class="container1">
            <div class="header">修改限制数</div>
            <span>单日使用限制数：</span><input type="number" name="limitedNumber" class="input-item" id="limitedNumber">
            <div class="btn" @click="updateUser">修改</div>
        </div>
    </div>

    <div class="window-mask" id="window-mask2">
        <div class="container1">
            <div class="header">需要生成几个认证码呢？</div>
            <!-- <span>单日使用限制数：</span> -->
            <input type="number" name="codeNumber" class="input-item" id="codeNumber">
            <div class="btn" @click="generateCode">生成</div>
        </div>
    </div>
</body>

<script type="text/javascript" src="./vue/vue.js"></script>
<script type="text/javascript" src="../node_modules/axios/dist/axios.js"></script>
<script>
    Vue.config.productionTip = false; //阻止生成生产提示

    // 实例化vue
    const x = new Vue({
        el: '#root',
        data: {
            userName: '仁冬',
        },
        mounted() {
            this.onload();
        },
        methods: {
            onload() {
                // this.tabletest();
                //获取用户信息
                axios({
                    method: 'GET',
                    url: 'http://localhost:9999/user/all',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(response => {
                    console.log(response.data)
                    const data = response.data.data
                    var table = document.getElementById("myTable");
                    for (let j = 0; j < data.length; j++) {
                        var row = table.insertRow(-1);
                        var cell = [];
                        for (let i = 0; i < 6; i++) {
                            cell.push(row.insertCell(i));
                            cell[i].style = "text-align: center;height:3rem;vertical-align: middle;";
                        }
                        var checkbox = document.createElement("input");
                        checkbox.type = "checkbox"
                        checkbox.id = "checkbox" + j
                        cell[0].appendChild(checkbox);
                        cell[1].innerHTML = data[j].userName;
                        switch (data[j].position) {
                            case 0:
                                cell[2].innerHTML = "普通用户";
                                break;
                            case 1:
                                cell[2].innerHTML = "管理员";
                                break;
                        }
                        cell[3].innerHTML = data[j].totalNumber;
                        cell[4].innerHTML = data[j].todayNumber;
                        cell[5].innerHTML = data[j].limitedNumber;
                    }
                });

                //获取认证码信息
                axios({
                    method: 'GET',
                    url: 'http://localhost:9999/identify/all',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(response => {
                    console.log(response.data)
                    const data = response.data.data
                    localStorage.setItem("codeDataLength", data.length);
                    var table = document.getElementById("code");
                    for (let j = 0; j < data.length; j++) {
                        var row = table.insertRow(-1);
                        var cell = [];
                        for (let i = 0; i < 2; i++) {
                            cell.push(row.insertCell(i));
                            cell[i].style = "text-align: center;height:3rem;vertical-align: middle;";
                        }
                        cell[0].innerHTML = data[j].code;
                        switch (Number(data[j].beUsed)) {
                            case 0:
                                cell[1].innerHTML = "否";
                                break;
                            case 1:
                                cell[1].innerHTML = "是";
                                break;
                        }
                    }
                });
            },

            //测试用，在接口接上之前模拟表格数据
            tabletest() {
                var data = [{
                    userName: "杨俊豪",
                    authority: 1,
                    usedTime: 100,
                    usedTimeSingleDay: 6,
                    limitedUsedTimeSingleDay: 10,
                }, {
                    userName: "杨俊豪",
                    authority: 1,
                    usedTime: 100,
                    usedTimeSingleDay: 6,
                    limitedUsedTimeSingleDay: 10,
                }, {
                    userName: "杨俊豪",
                    authority: 1,
                    usedTime: 100,
                    usedTimeSingleDay: 6,
                    limitedUsedTimeSingleDay: 10,
                }];
                var table = document.getElementById("myTable");
                for (let j = 0; j < data.length; j++) {
                    var row = table.insertRow(-1);
                    var cell = [];
                    for (let i = 0; i < 6; i++) {
                        cell.push(row.insertCell(i));
                        cell[i].style = "text-align: center;height:3rem;vertical-align: middle;";
                    }
                    var checkbox = document.createElement("input");
                    checkbox.type = "checkbox";
                    checkbox.id = "checkbox" + j;
                    cell[0].appendChild(checkbox);
                    cell[1].innerHTML = data[j].userName;
                    switch (data[j].authority) {
                        case 0:
                            cell[2].innerHTML = "普通用户";
                            break;
                        case 1:
                            cell[2].innerHTML = "管理员";
                            break;
                    }
                    cell[3].innerHTML = data[j].usedTime;
                    cell[4].innerHTML = data[j].usedTimeSingleDay;
                    cell[5].innerHTML = data[j].limitedUsedTimeSingleDay;
                }
            },

            //编辑用户
            edit() {
                var table = document.getElementById("myTable");
                for (let i = 0; i < table.rows.length - 1; i++) {
                    var checkbox = document.getElementById("checkbox" + String(i));
                    if (checkbox.checked) { //有选择用户才能按动
                        var container = document.getElementById("window-mask1");
                        container.style = "display:flex";
                        localStorage.setItem("editId", i + 1);
                        return;
                    }
                }
                alert("请选择要修改的用户！")
            },

            //修改认证码
            editCode() {
                //打开页面
                var container = document.getElementById("window-mask2");
                container.style = "display:flex";
            }
        },
    })

    //导航栏对应的vue
    const nav = new Vue({
        el: '#nav',
        data: {
            position: localStorage.getItem("position"),
        },
        computed: {
            antiPosition() {
                return !this.position
            }
        }
    })

    //编辑栏对应的vue
    const edit = new Vue({
        el: '#window-mask1',
        methods: {
            //修改
            updateUser() {
                //关掉页面
                var container = document.getElementById("window-mask1");
                container.style = "display:none";

                //修改用户信息
                if (document.getElementById("limitedNumber").value) {
                    axios({
                        method: 'POST',
                        url: 'http://localhost:9999/user/updateLimitedNumber',
                        data: {
                            userId: localStorage.getItem("editId"),
                            limitedNumber: document.getElementById("limitedNumber").value
                        },
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(response => {
                        localStorage.removeItem("editId")
                        if (confirm("更改成功！")) {
                            window.location.reload();
                        }
                    }).catch(response => {
                        console.error(error.message);
                    });
                }

            }
        }
    })
    const editCode = new Vue({
        el: '#window-mask2',
        methods: {
            //修改
            generateCode() {
                //关掉页面
                var container = document.getElementById("window-mask2");
                container.style = "display:none";

                //修改用户信息
                const codeNumber = document.getElementById("codeNumber").value
                if (codeNumber) {
                    for (let i = 1; i <= codeNumber; i++) {
                        var code = "gsdkj_" + String(10000 + Number(localStorage.getItem(
                            "codeDataLength")) + i)
                        var pkId = Number(localStorage.getItem("codeDataLength")) + i
                        axios({
                            url: "http://localhost:9999/identify/generateCode",
                            method: 'POST',
                            data: {
                                code: code,
                                pkId: pkId
                            },
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }).then(response => {
                            console.log(response.data)
                        }).catch(error => {
                            if (error.response) {
                                // 服务器返回了状态码是error.response.status的响应  
                                console.error(error.response.data);
                                console.error(error.response.status);
                                console.error(error.response.headers);
                            } else if (error.request) {
                                // 请求已发出，但没有收到响应  
                                console.error('Error', error.message);
                            } else {
                                // 发送请求时发生了其他错误  
                                console.error('Error', error.message);
                            }
                        });
                    }
                }
                setTimeout(() => {
                    if (confirm("新增认证码成功！")) {
                        window.location.reload();
                    }
                }, 1000)
            }
        }
    })
</script>
</html>